import React, {Component} from "react";
import shareListScss from "../sass/shareList.scss";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import indexScss from "../sass/index.scss";

export default class ShareList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            show: this.props.show
        };
    }

    componentWillReceiveProps(nextProps) {
        if (!nextProps.show) {
            setTimeout(() => {
                this.setState({show: nextProps.show});
            }, 500);
        } else {
            this.setState({show: nextProps.show});
        }
    }

    render() {
        const style = this.props.style || {};
        let listJsx = this.props.show ? (
            <section className={shareListScss.shareListWrapper} style={style.shareListWrapper}>
                <header className={shareListScss.shareListHeader} style={style.shareListHeader}>
                    {this.props.title || "分享到"}
                </header>
                <div className={shareListScss.content} style={style.content}>
                    <ul className={shareListScss.shareUl} style={style.shareUl}>
                        {this.props.children}
                    </ul>
                </div>
                <footer style={style.footer}>
                    <a
                        href="JavaScript:;"
                        style={style.close}
                        className={shareListScss.close}
                        onClick={this.props.closeFun}
                    >
                        取消
                    </a>
                </footer>
            </section>
        ) : null;
        if (!this.state.show) {
            style.shareList = style.shareList || {};
            style.shareList.display = "none";
        } else {
            style.shareList = style.shareList || {};
            style.shareList.display = "block";
        }
        return (
            <div className={shareListScss.shareList} style={style.shareList}>
                <div className={shareListScss.mo} onTouchStart={this.stopTouchEvent.bind(this)} />
                <ReactCSSTransitionGroup
                    transitionName={{
                        leave: indexScss.leave,
                        leaveActive: indexScss.leaveActive,
                        enter: indexScss.appear,
                        enterActive: indexScss.appearActive
                    }}
                    transitionLeaveTimeout={500}
                    transitionEnterTimeout={500}
                    transitionLeave={true}
                    transitionEnter={true}
                >
                    {listJsx}
                </ReactCSSTransitionGroup>
            </div>
        );
    }

    stopTouchEvent(event) {
        event.preventDefault();
    }
}
